:root {
  --size: 3;
}

.sky {
  postition: relative;
}

.star {
  background-color: #919191;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  position: relative;
}

.glow {
  background: white;
  animation: glitter 15s infinite;
}

.one {
  top: 40rpx;
  left: calc(3 * 60rpx);
  animation-delay: -2s;
}

.two {
  top: 15rpx;
  left: calc(3 * 90rpx);
  animation-delay: -1.7s;
}

.three {
  top: 30rpx;
  left: calc(3 * 120rpx);
  animation-delay: -1.4s;
}

.four {
  top: 30rpx;
  left: calc(3 * 150rpx);
  animation-delay: -1.1s;
}

.five {
  top: 60rpx;
  left: calc(3 * 155rpx);
  animation-delay: -0.8s;
}

.six {
  top: 55rpx;
  left: calc(3 * 185rpx);
  animation-delay: -0.5s;
}

.seven {
  top: -25rpx;
  left: calc(3 * 200rpx);
  animation-delay: -0.2s;
}

.moon {
  position: relative;
  top: -10%;
  left: 10%;
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: #ddd;
  box-shadow: inset 10rpx -10rpx #b9b9b9, 0rpx 0rpx 40rpx 20rpx #203A87;
}

.crater {
  position: relative;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #bbb;
}

.crater1 {
  top: 30rpx;
  right: 30rpx;
  box-shadow: inset -1rpx 2rpx 0 0 #969696;
}

.crater2 {
  width: 20rpx;
  height: 20rpx;
  top: 15rpx;
  right: 10rpx;
  box-shadow: inset -2rpx 4rpx 0 0 #aaa;
}

.crater3 {
  width: 5rpx;
  height: 5rpx;
  top: 10rpx;
  right: 30rpx;
}

@keyframes glitter {
    0% {
        transform: scale(1.0);
        opacity: 1;
        box-shadow: 0rpx 0rpx 10rpx 5rpx #535FED;
    }
    25% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.0);
        opacity: 1;
        box-shadow: 0rpx 0rpx 10rpx 5rpx #535FED;
    }
    75% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1.0);
        opacity: 1;
        box-shadow: 0rpx 0rpx 10rpx 5rpx #535FED;
    }
}